<template>
  <view class="flutter-container" :style="containerStyle">
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'

export type DisplayType = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex'
export type FillType = 'none' | 'width' | 'height' | 'both'

interface ShadowProps {
  color?: string
  offsetX?: number
  offsetY?: number
  blurRadius?: number
  spreadRadius?: number
}

interface Props {
  margin?: string | number
  padding?: string | number
  border?: string
  borderRadius?: string | number
  backgroundColor?: string
  shadow?: ShadowProps | boolean
  width?: string | number
  height?: string | number
  display?: DisplayType
  fill?: FillType
}

const props = withDefaults(defineProps<Props>(), {
  margin: 0,
  padding: 0,
  border: 'none',
  borderRadius: 0,
  backgroundColor: 'transparent',
  shadow: false,
  width: undefined,
  height: undefined,
  display: 'block',
  fill: 'none',
})

const defaultShadow: Required<ShadowProps> = {
  color: 'rgba(0, 0, 0, 0.2)',
  offsetX: 0,
  offsetY: 0,
  blurRadius: 4,
  spreadRadius: 2,
}

const containerStyle = computed(() => {
  const style: Record<string, string> = {
    boxSizing: 'border-box',
    border: props.border,
    borderRadius:
      typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius,
    backgroundColor: props.backgroundColor,
    display: props.display,
  }

  // 处理 margin
  const marginValue = typeof props.margin === 'number' ? `${props.margin}px` : props.margin
  style.margin = marginValue

  // 处理 padding
  const paddingValue = typeof props.padding === 'number' ? `${props.padding}px` : props.padding
  style.padding = paddingValue

  // 计算水平方向的 margin
  const horizontalMargin =
    marginValue.split(' ').length > 1
      ? marginValue.split(' ').reduce((acc, val) => acc + parseFloat(val) || 0, 0)
      : parseFloat(marginValue) * 2 || 0

  // 处理宽度
  if (props.fill === 'width' || props.fill === 'both') {
    style.width = horizontalMargin > 0 ? `calc(100% - ${horizontalMargin}px)` : '100%'
  } else if (props.width === undefined) {
    style.width = 'fit-content'
  } else {
    style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
  }

  // 处理高度
  if (props.fill === 'height' || props.fill === 'both') {
    style.height = '100%'
  } else if (props.height === undefined) {
    style.height = 'fit-content'
  } else {
    style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
  }

  if (props.shadow) {
    const shadowProps = typeof props.shadow === 'boolean' ? {} : props.shadow
    const { color, offsetX, offsetY, blurRadius, spreadRadius } = {
      ...defaultShadow,
      ...shadowProps,
    }
    style.boxShadow = `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`
  }

  console.log('当前样式：', style)
  return style
})

watch(
  containerStyle,
  (newValue) => {
    console.log('样式变化：', newValue)
  },
  { immediate: true },
)
</script>

<style scoped>
.flutter-container {
  box-sizing: border-box;
}
</style>
